<template>
  <div class="forget">
    <div class="forgetform">
      <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="80px">
        <h3>修改密码</h3>
        <hr>
          <el-form-item prop="username" label="用户账号">
            <el-input v-model="ruleForm.username" placeholder="请输入用户账号" autocomplete="off"></el-input>
          </el-form-item>
        <el-form-item prop="password" label="旧密码">
          <el-input v-model="ruleForm.checkoldpassword" show-password placeholder="请输入旧密码" autocomplete="off"></el-input>
        </el-form-item>
          <el-form-item prop="password" label="新密码">
            <el-input v-model="ruleForm.newpassword" show-password placeholder="请输入新密码" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="checkpassword" label="确认密码">
            <el-input v-model="ruleForm.checkpassword" show-password placeholder="请再次输入密码"
                      autocomplete="off"></el-input>
          </el-form-item>
        <el-button type="primary" @click="forget">重置密码</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var checkusername= (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'));
      }
      callback();
    };
    var checkoldpassword= (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入旧密码'));
      }
      callback();
    };
    var checknewpassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else if (value.length < 1) {
        callback(new Error('您设置的密码位数不符合要求，请大于9位'));
      } else {
        if (this.ruleForm.checkpassword !== '') {
          this.$refs.ruleForm.validateField('checkpassword');
        }
        callback();
      }
    };
    var checkpassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.newpassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: '',
        checkoldpassword: '',
        newpassword: '',
        checkpassword: ''
      },
      rules: {
        checkoldpassword: [
          {validator: checkoldpassword, trigger: 'blur'}
        ],
        checkpassword: [
          {validator: checkpassword, trigger: 'blur'}
        ],
        username: [
          {validator: checkusername, trigger: 'blur'}
        ],
        newpassword: [
          {validator: checknewpassword, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    forget(){
      this.$router.push({path: '/'})
    }
  }
}
</script>

<style scoped>
.forget {
  width: 100%;
  height: 100%;
  background: url("../../static/1.png") no-repeat;
  background-size: cover;
  overflow: hidden;
}

.forgetform {
  background: url("../../static/1.png") no-repeat;
  background-size: cover;
  width: 330px;
  height: 405px;
  margin: 215px auto;
  overflow: hidden;
  padding-top: 10px;
  line-height: 20px;
}

h3 {
  color: #0babeab8;
  font-size: 24px;
}

hr {
  background-color: #444;
  margin: 20px auto;
}

form {
  width: 300px;
}
</style>
